<!-- Vip充值界面 -->
<template>
  <div>
    <!-- 顶部 -->
    <van-nav-bar title="会员中心" left-arrow @click-left="arrow" />

    <!-- banner -->
    <div class="banner">
      <h4>开通年卡 买一年送一年</h4>
      <p>开通立享会员所有权益，赢取积分</p>
    </div>

    <!-- 套餐权益 -->
    <div class="qy-tc">
      <h2><span>会员权益</span></h2>
      <div class="qy">
        <ul>
          <li>
            <div class="icon">
              <van-icon name="chart-trending-o" size="25" />
            </div>
            <p>喜好分析</p>
          </li>
          <li>
            <div class="icon">
              <van-icon name="balance-o" size="25" />
            </div>
            <p>积分等级</p>
          </li>
          <li>
            <div class="icon">
              <van-icon name="certificate" size="25" />
            </div>
            <p>无广告</p>
          </li>
          <li>
            <div class="icon">
              <van-icon name="upgrade" size="25" />
            </div>
            <p>动态顶置</p>
          </li>
        </ul>
      </div>
      <h2>
        <span>会员套餐</span><a><van-icon name="info-o" />会员套餐</a>
      </h2>
      <div class="tc">
        <ul>
          <li
            v-for="(item, index) in list"
            :class="item.checked ? 'on' : ''"
            @click="chooseTc(index)"
            :key="index"
          >
            <p>{{ item.name }}</p>
            <p><span>¥</span>{{ item.price }}</p>
            <p>原价:¥{{ item.oldprice }}</p>
            <i>立省{{ item.oldprice - item.price }}</i>
          </li>
        </ul>
      </div>

      <!-- 协议 -->
      <div class="agreement">
        <!-- <i
          class="iconfont"
          :class="agreement ? 'icon-radio-select' : 'icon-radio-none'"
        ></i> -->
        <van-checkbox
          v-model="checked"
          icon-size="20px"
          checked-color="#ff2c6a"
        >
          <p @click="agreement = !agreement">
            <span>已阅读并同意</span><a href="#">《时光源会员交易协议》</a
            ><a href="#">《网络安全协议》</a>
          </p>
        </van-checkbox>
      </div>
      <!-- 开通会员 -->
      <div class="submit">
        <i>限时买一年送一年</i>
        <van-button @click="getVip">立即开通会员</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from "vuex";
import {Toast} from "vant";

export default {
  //   el: "#app",
  data() {
    return {
      agreement: false,
      list: [
        {
          id: 1,
          name: "连续包年",
          price: "99",
          oldprice: "209",
          checked: true,
        },
        {
          id: 2,
          name: "连续包季",
          price: "39",
          oldprice: "159",
          checked: false,
        },
        {
          id: 3,
          name: "连续包月",
          price: "10",
          oldprice: "29",
          checked: false,
        },
      ],
      time: 30,
      selected: {
        id: 1,
        name: "连续包年",
        price: "189",
        oldprice: "389",
        checked: true,
      },
      checked: false,
    };
  },
  computed: {
    ...mapState(['userinfo'])
  },
  methods: {
    arrow() {
      console.log("返回");
      history.go(-1)
    },
    // 邀请好友
    share() {
      layer.open({
        content: "充值享受更多好礼相送哦！",
        btn: "确定",
      });
    },
    // 套餐选择
    chooseTc(index) {
      this.list.forEach((item) => {
        item.checked = false;
      });
      this.list[index].checked = true;
      this.selected = {};
      this.selected = this.list[index];
      if(index == 0){
        this.time = 30
      }else if(index==1){
        this.time = 60
      }else {
        this.time =360
      }
    },
    getVip() {
      this.axios.post('http://localhost:10006/api/ali-pay/trade/page/pay/4').then(response => {
         console.log(response.data.data)
         document.write(response.data.data.formStr)
         // this.$router.push('/success?orderId='+this.orderId+'&amount='+(this.price*this.num+this.freight))
       })
      // const url ="http://localhost:10002/ums/vip/add-newVIP"
      // const dat = {
      //   userId: this.userinfo.id,
      //   time: this.time,
      //   state: 1
      // }
      // this.axios.post(url,dat).then(response =>{
      //   if(response.data.state){
      //     Toast("恭喜")
      //     console.log("开通成功",response.data.state)
      //     this.$router.push("/homeview/my/mypage")
      //   }else if(response.data.state==500){
      //     Toast("你已经开通")
      //     console.log("你已经开通")
      //   }else{
      //     Toast("服务器忙")
      //     console.log("服务器忙")
      //   }
      // })
    }
    // 提交
    // submit() {
    //   if (!this.agreement) {
    //     layer.open({
    //       content: "请勾选同意协议",
    //       skin: "msg",
    //       time: 2,
    //     });
    //     return;
    //   }
    //   layer.open({
    //     content:
    //       "您选择了" +
    //       this.selected.name +
    //       "<br>" +
    //       "价格：" +
    //       this.selected.price,
    //     btn: "确定",
    //   });
    // },
  },
};
</script>

<style scoped>
/* banner */
.banner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  background: linear-gradient(to right, #fd738b, #ff2c6a);
  margin-top: 20px;
  margin-bottom: 10px;
  margin-right: 10px;
  margin-left: 10px;
  border-radius: 10px;
  padding: 10px 15px;
}

.banner h4 {
  font-size: 18px;
  color: #ffffff;
  font-weight: bold;
  margin: 10px 0;
}

.banner p {
  font-size: 12px;
  color: #fe527c;
  background: #ffffff;
  border-radius: 10px;
  margin-bottom: 10px;
  padding: 2px 9px;
}

/* 套餐权益 */
.qy-tc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 450px;
  margin: 6px 10px;
}

.qy-tc h2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4rem;
  padding-right: 0.2rem;
}

.qy-tc h2 span {
  font-size: 17px;
  font-weight: bold;
  color: #333333;
}

.qy-tc h2 a {
  font-size: 0.24rem;
  color: #333333;
  display: flex;
  align-items: center;
  display: inline-flex;
}

.qy-tc h2 a i {
  font-size: 0.3rem;
  margin-top: 0.05rem;
}

.qy {
  margin: 10px 8px;
  padding-top: 3px;
  padding-bottom: 10px;
}

.qy ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.qy ul li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.qy ul li .icon {
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(45deg, #fd6183, #fe4274);
  border-radius: 100%;
}

.qy ul li i {
  color: #ffffff;
}

.qy ul li p {
  font-size: 0.26rem;
  color: #303030;
  margin-top: 4px;
}

.tc {
  margin: 15px 8px;
  padding: 2px;
}

.tc ul {
  display: flex;
  justify-content: space-between;
}

.tc ul li {
  width: 93px;
  height: 114px;
  border-radius: 15px;
  border: 0.02rem solid #e2e2e2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.tc ul li p {
  font-size: 0.26rem;
  color: #333333;
  text-align: center;
}

.tc ul li p:nth-child(1) {
  font-size: 14px;
  margin-bottom: 0.1rem;
}

.tc ul li p:nth-child(2) {
  font-size: 23px;
  font-weight: bold;
}

.tc ul li p:nth-child(2) span {
  font-size: 0.26rem;
  margin-bottom: 0.05rem;
}

.tc ul li p:nth-child(3) {
  font-size: 0.22rem;
  opacity: 0.8;
}

.tc ul li i {
  position: absolute;
  display: inline-block;
  top: -7px;
  left: -0.02rem;
  font-size: 13px;
  color: #ffffff;
  padding: 2px 4px 2px 4px;
  border-radius: 5px 0 5px 0;
  background: linear-gradient(45deg, #ffc37d, #ffc37d, #ff9841, #ff6800);
  z-index: 2;
}

.tc ul li.on {
  border: 0.02rem solid #ff4676;
}

.tc ul li.on p {
  color: #ff4676;
}

/* 协议 */
.agreement {
  display: flex;
  align-items: center;
  color: #333333;
  padding: 0 0.15rem;
  margin: 10px 8px;
}

.agreement span {
  margin-right: 0.05rem;
  font-size: 14px;
}

.agreement a {
  color: #cf9147;
  font-size: 14px;
}

/* 开通会员 */
.submit {
  position: relative;
  margin: 5px;
}

.submit button {
  width: 100%;
  height: 50px;
  border-radius: 13px;
  background: linear-gradient(to right, #fd738b, #fd738b, #ff2c6a);
  font-size: 17px;
  color: #ffffff;
  box-shadow: 0 0.2rem 0.25rem rgba(255, 44, 106, 0.2);
}

.submit i {
  position: absolute;
  display: inline-block;
  top: -7px;
  right: 0.2rem;
  font-size: 13px;
  color: #ffffff;
  padding: 2px 4px 2px 4px;
  border-radius: 5px 0 5px 0;
  background: linear-gradient(45deg, #ffc37d, #ffc37d, #ff9841, #ff6800);
  z-index: 2;
  overflow: hidden;
}
</style>